<template>
    <div class="box">
        <div class="cont">
            <div class="back" @click="$router.back()">
                <svg width="60" height="60" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M25 5L10 20L25 35" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="cont_item">
                <van-swipe class="my-swipe"
                 :show-indicators="false"
                 :loop="false"
                 >
                    <van-swipe-item v-for="item in data" :key="item.id">
                        <img :src="item.img" alt="">
                        <div class="black">
                            <div class="time">
                                {{ item.time }}
                            </div>
                            <div class="black_title">
                                {{ item.title }}
                                <!-- 为了寻找你，我搬进了鸟的眼睛，经常盯着路过的风！ -->
                            </div>
                        </div>
                    </van-swipe-item>
                    
                </van-swipe>
                
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import dayDate from '../data/day_data.json';
import { flat } from 'vant/lib/utils';

const data = ref([]);

// 获取最近10天的日期
const getRecentDays = () => {
    const days = [];
    const today = new Date();
    
    for (let i = 0; i < 10; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        // 补零处理
        const day = date.getDate().toString().padStart(2, '0');
        days.push(day);
    }
    
    return days;
};

// 动态导入图片
const importImage = async (path) => {
    try {
        const image = await import(`../assets/${path}`);
        return image.default;
    } catch (error) {
        console.error('图片加载失败:', error);
        return ''; // 返回空字符串或默认图片路径
    }
};

//获取数据
onMounted(async () => {
    const days = getRecentDays();
    // 为每条数据添加日期和图片
    const processedData = await Promise.all(dayDate.map(async (item, index) => {
        const imgUrl = await importImage(item.img);
        return {
            ...item,
            time: days[index] || days[0], // 如果数据条数超过10条，使用第一天的日期
            img: imgUrl
        };
    }));
    
    data.value = processedData;
    console.log('处理后的数据:', data.value);
});

</script>
<style lang="less" scoped>
.box {
    width: 100%;
    .cont {
        width: 100%;
        height: 100vh;
        position: relative;
        
        .back {
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 100;
        }
        .cont_item {
            width: 100%;
            height: 100vh;
            // object-fit: cover;
            img {
                // width: 100%;
                height: 100vh;
            }
            .black {
                position: absolute;
                bottom: 0;
                width: 100%;
                min-height: 20%;
                background-color: rgba(0, 0, 0, .3);
                padding: 50px 30px;
                color: #fff;
                .time {
                    font-size: 150px;
                    font-weight: 700;
                }
                .black_title {
                    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                    margin-top: 50px;
                    font-size: 40px;
                }
            }
        }
    }
}
</style>